<template>
  <view>
    <nav-bar title="康复训练计划" :showLeftIcon="false"></nav-bar>
    <!-- <view class="common-title">
      <view class="title">我的患者</view>
      <view class="more-box" @click="clickMorePatient">
        更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
      </view>
    </view>
    <view class="my-patient">
      <view class="img"></view>
      <view class="info-box">
        <view class="info">
          <view class="name">{{ myPatient.name }}</view>
          <view class="sex">{{ myPatient.sex }}</view>
          <view class="age">{{ myPatient.age }}岁</view>
        </view>
        <view class="label">{{ myPatient.label }}</view>
      </view>
    </view> -->
    <view class="common-title">
      <view class="title">训练计划</view>
      <!-- <view class="more-box" @click="clickMorePlan">
        更多<uni-icons class="more-icon" type="right" color="#999" size="12"></uni-icons>
      </view> -->
    </view>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
            <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
            正在加载数据，请稍后......
          </view>
          <view v-else-if="!planList || planList.length === 0" class="common-no-data">
            <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
            <view class="text">暂无训练计划</view>
          </view>
        <view v-else>
          <plan-list :showPatient="true" :planList="planList" @assess="clickAssess"></plan-list>
        </view>
      </template>
    </you-scroll>
    <tab-bar :selectedIndex="1"></tab-bar>
  </view>
</template>

<script>
  import PlanList from '../subPages/components/planList.vue'
  import api_physician from '@/api/physician.js'
  import { baseIconUrl, baseUrl } from '@/config'
  export default {
    name: 'Plan',
    components: { PlanList },
    data() {
      return {
        baseIconUrl,
        baseUrl,
        myPatient: {
          name: '赵菲菲',
          sex: '女',
          age: '35',
          label: '关节扭伤、类风湿关节炎'
        },
        loadingHeight: '',
        scrollHeight: '',
        isAllData: false,
        isRequestSuccess: false,
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        planList: []
      }
    },
    onShow() {
      uni.hideTabBar()
      this.scrollHeight = this.$store.getters.heightData.mainHeight - 48 + 'px'
      this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'
      this.pageNum = 1
      this.planList = []
      this.isLoading = true
      this.getPlanList()
    },
    methods: {
      getPlanList() {
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
        api_physician.fetchPlanList(params).then(res => {
          this.isLoading = false
          this.isRequestSuccess = true
          if (res.code !== 200) return
          const resultList = res.rows.map(item => {
            return {
              userPhoto: item.baUser.userPhoto && item.baUser.userPhoto.includes('http') ? item.baUser.userPhoto : this.baseUrl + item.baUser.userPhoto,
              ...item,
              ...item.latestBaplan
            }
          })
          this.planList.push(...resultList)
          this.total = res.total
        }).catch(err => {
          this.isLoading = false
          this.isRequestSuccess = true
        })
      },
      clickMorePatient() {
        uni.navigateTo({
          url: '/subPages/physicianTrainPlan/patient/myPatient'
        })
      },
      // 计划列表去评估
      clickAssess(item) {
        uni.navigateTo({
          url: `/subPages/physicianTrainPlan/plan/assessReport?patientName=${item.name}&planId=${item.id}`
        })
      },
      // 下拉刷新
      onRefresh() {
        this.pageNum = 1
        this.planList = []
        this.isAllData = false
        this.isRequestSuccess = false
        this.getPlanList()
      },
      // 上拉加载
      loadMore() {
        if (this.planList.length < this.total) {
          this.pageNum++
          this.isAllData = false
          this.isRequestSuccess = false
          this.getPlanList()
        } else {
          this.isAllData = true
        }
      }
    }
  }
</script>
<style lang="scss">
  .common-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 46px;
    padding: 0 30rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
    }
    .more-box {
      font-size: 24rpx;
      color: #999;
    }
  }
  .my-patient {
    display: flex;
    align-items: center;
    height: 90px;
    padding: 0 30rpx;
    border-radius: 16rpx;
    background-color: #f5f7fc;
    .img-box {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .info-box {
      flex: 1;
      margin: 0 20rpx;
      .info {
        display: flex;
        align-items: center;
        .name {
          font-size: 36rpx;
          font-weight: 500;
          color: #333;
        }
        .sex,
        .age {
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }
      .label {
        display: inline-block;
        margin-top: 20rpx;
        padding: 8rpx 18rpx;
        font-size: 24rpx;
        font-weight: 400;
        border-radius: 8rpx;
        color: #4B84D4;
        background: rgba(75, 132, 212, .1);
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60rpx;
      padding: 0 36rpx;
      border-radius: 30rpx;
      font-size: 24rpx;
      color: #FFF;
      background-color: #115BAA;
    }
  }
</style>